<template>
    <div id='categoryadd'>
        <p style="font-size:35px;">品类管理 -- 添加品类</p>
        <br><br>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>所属品类</h4>
                <br>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="'/所有/'+item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>品类名称</h4>
                <br>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input v-model="input" placeholder="请输入品类名称">
                </el-input>
            </el-col>
        </el-row>
        <br><br>
        <el-button style="margin-left:110px;" type="primary" @click="onSubmit">提交</el-button>
    </div>
</template>

<script>
    import {} from 'vuex'
    import {
        Row,
        Col,
        Select,
        Button,
        Option,
        Input
    } from 'element-ui'
    import {
        categoryList,
        categoryadd
    } from '../../../api/index';
    export default {
        components: {
            'el-row': Row,
            'el-col': Col,
            'el-select': Select,
            'el-button': Button,
            'el-option': Option,
            'el-input': Input,
        },
        data() {
            return {
                options: [],
                value: 0,
                input: '',
            };
        },
        methods: {
            async onSubmit() {
                if (this.input == '') {
                    return this.$message.error('请输入品类名称');
                }
                var obj = {
                    parentId: this.value,
                    categoryName: this.input
                }
                let res = await categoryadd(obj)
                this.$message({
                    message: res.data.data,
                    type: 'success'
                });
            },
            async getcate() {
                let res = await categoryList()
                this.options = res.data.data
                var obj = {
                    id: 0,
                    name: "",
                }
                this.options.unshift(obj)
            }
        },
        mounted() {
            this.getcate()
        },
        computed: {}
    }
</script>
<style lang='scss' scoped>
    #categoryadd {
        padding: 20px 0;
    }
</style>